<script type="text/javascript">
	$(document).ready(function () {
		//var theme = "summer";
		var alasansp_task = "CREATE";
		var btn_alasansp_task = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
		var editrow = -1;
	
		var navbar = $("#jqxNavigationBar");
		navbar.jqxNavigationBar({ width: '100%', height:"auto", sizeMode: 'auto', expandMode:"single", toggleMode: "none", theme: theme });
	
		/* START DATA */
		// prepare the data
		var sourceAlasanSP =
		{
			datatype: "json",
			datafields: [
				{ name: 'KODEALASAN' },
				{ name: 'ALASANSP' },
				{ name: 'KATEGORI' },
				{ name: 'KETERANGAN' }
			],
			id: 'KODEALASAN',
			url: 'index.php?c=c_alasansp&m=get_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(sourceAlasanSP);

		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
            pageable: true,
			filterable: true,
            autoheight: true,
			columns: [
				{ text: 'KODEALASAN', dataField: 'KODEALASAN', width: 120 },
				{ text: 'ALASANSP', dataField: 'ALASANSP', width: 280 },
				{ text: 'KATEGORI', dataField: 'KATEGORI', width: 100 },
				{ text: 'KETERANGAN', dataField: 'KETERANGAN', width: 280 },
				{ text: '', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				},
				{ text: '', datafield: 'Hapus', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Hapus";
				}, buttonclick: function (row) {
					if(confirm("Yakin data akan dihapus?")){
						// open form Create/Update.
						editrow = row;
						
						// get the clicked row's data and initialize the input fields.
						var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
						cu_formDel(dataRecord);
					}
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
		$('.text-input').addClass('jqx-input');
		$('.text-input').addClass('jqx-rc-all');
		$('.text-input').width(200);
		$('.text-input').height(23);
		if (theme.length > 0) {
			$('.text-input').addClass('jqx-input-' + theme);
			$('.text-input').addClass('jqx-widget-content-' + theme);
			$('.text-input').addClass('jqx-rc-all-' + theme);
		}
		
		var textfield_kodealasan_lama = $("#alasansp_kodealasan_lama");
		var textfield_kodealasan = $("#alasansp_kodealasan");
		var textfield_alasansp = $("#alasansp_alasansp");
		var radiofield_katringan = $("#jqxRadioKatRingan");
		var radiofield_katsedang = $("#jqxRadioKatSedang");
		var radiofield_katberat = $("#jqxRadioKatBerat");
		var textfield_keterangan = $("#alasansp_keterangan");
		textfield_keterangan.height(48);
		textfield_keterangan.bind('keypress', function(e) {
      		if ((e.keyCode || e.which) == 13) {
        		//$(this).parents('form').submit();
        	    return false;
       		}
      	});
		
		textfield_kodealasan.width(60);
        radiofield_katringan.jqxRadioButton({ width: 100, height: 25, checked: true, theme: theme });
        radiofield_katsedang.jqxRadioButton({ width: 100, height: 25, checked: false, theme: theme });
        radiofield_katberat.jqxRadioButton({ width: 100, height: 25, checked: false, theme: theme });	
		
		var create_btn = $("#createBtn");
		var save_btn = $("#Save");
		var cancel_btn = $("#Cancel");
		var export_excel_btn = $("#exportExcelBtn");
		var export_pdf_btn = $("#exportPdfBtn");
		var export_print_btn = $("#exportPrintBtn");
		
		// initialize the popup window and buttons.
		create_btn.jqxButton({ theme: theme });
		save_btn.jqxButton({ theme: theme });
		cancel_btn.jqxButton({ theme: theme });
		export_excel_btn.jqxButton({ theme: theme });
		export_pdf_btn.jqxButton({ theme: theme });
		export_print_btn.jqxButton({ theme: theme });
		
		var alasanspForm = $('#alasanspForm');
		alasanspForm.jqxValidator({
			rules: [
				{ input: textfield_kodealasan, message: 'Kode Alasan harus diisi!', action: 'keyup', rule: 'required' },
				{ input: textfield_kodealasan, message: 'Kode Alasan panjangnya 1-5 karakter!', action: 'keyup', rule: 'length=1,5' }
				   ],
			theme: theme
		});
		
		var saving_notice = $("#saveAlasanSPNotice");
		var ok = $("#ok");
		var message_notice = $('#eventLog');
		saving_notice.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05, position: { x: 400, y: 100 } });
        ok.jqxButton({ theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the alasansp clicks the 'Save' button.
        save_btn.click(function () {
			var form_validate = alasanspForm.jqxValidator('validate');
			if(form_validate){
				var alasansp_kodealasan_lama_field = "";
				var alasansp_kodealasan_field = "";
				var alasansp_alasansp_field = "";
				var alasansp_kategori_field = 'R';
				var alasansp_keterangan_field = "";
				
				if(textfield_kodealasan_lama.val() !== null || textfield_kodealasan_lama.val() !== ''){
					alasansp_kodealasan_lama_field = textfield_kodealasan_lama.val();
				}
				if(textfield_kodealasan.val() !== null || textfield_kodealasan.val() !== ''){
					alasansp_kodealasan_field = textfield_kodealasan.val();
				}
				if(textfield_alasansp.val() !== null || textfield_alasansp.val() !== ''){
					alasansp_alasansp_field = textfield_alasansp.val();
				}
				
				if(radiofield_katringan.jqxRadioButton('checked') == true){
					alasansp_kategori_field = 'R';
				}else if(radiofield_katsedang.jqxRadioButton('checked') == true){
					alasansp_kategori_field = 'S';
				}else {
					alasansp_kategori_field = 'B';
				}
				
				if(textfield_keterangan.val() !== null || textfield_keterangan.val() !== ''){
					alasansp_keterangan_field = textfield_keterangan.val();
				}
				
				var row = {
						task: alasansp_task,
						kodealasan_lama: alasansp_kodealasan_lama_field,
						kodealasan: alasansp_kodealasan_field,
						alasansp: alasansp_alasansp_field,
						kategori: alasansp_kategori_field,
						keterangan: alasansp_keterangan_field
				};
				
				if (editrow >= 0) {
					//edit row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_alasansp&m=get_action',
						data: row,
						success: function(response){
							$('#jqxgrid').jqxGrid('updatebounddata');
							gridExpand();
						}
					});
				}else{
					//add row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_alasansp&m=get_action',
						data: row,
						success: function(response){
							if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							}
							else{
								createNotice(response);
							}
						}
					});
					
				}
			}else{
				createNotice("Isian data belum lengkap!");
			}
        });

        cancel_btn.click(function () {
        	cu_formReset();
        	gridExpand();
        });
		
		create_btn.click(function () {
        	btn_alasansp_task = "CREATE";
			
        	cu_formReset();
			
        	formExpand();
        	
        	textfield_kodealasan_lama.val(0);
			textfield_kodealasan.focus();
			
        });
        
		ok.click(function(){
        	message_notice.empty();
        	saving_notice.jqxWindow('hide');
        });
		
		export_excel_btn.click(function () {
			var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
			if(rowscount>0){
				var rowsdata = $('#jqxgrid').jqxGrid('getrows');
				$.ajax({
					type: 'POST',
					url: 'index.php?c=c_alasansp&m=export_excel',
					data: {rows: rowsdata},
					success: function(response){
						if(response==1){
							win = window.location=('./documents/alasansp.xlsx');
						}
					}
				});
			}
		});
		
		export_pdf_btn.click(function () {
			var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
			if(rowscount>0){
				var rowsdata = $('#jqxgrid').jqxGrid('getrows');
				//window.open('index.php?c=c_grade&m=export_pdf&rows=' + rowsdata);
				$.ajax({
					type: 'POST',
					url: 'index.php?c=c_alasansp&m=export_pdf',
					data: {rows: rowsdata}
				});
			}
		});
		
		export_print_btn.click(function () {
			var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
			if(rowscount>0){
				var rowsdata = $('#jqxgrid').jqxGrid('getrows');
				$.ajax({
					type: 'POST',
					url: 'index.php?c=c_alasansp&m=cetak',
					data: {rows: rowsdata},
					success: function(response){
						win = window.open('./documents/alasansplist.html','alasansp_list','height=400,width=900,resizable=1,scrollbars=1, menubar=1');
					}
				});
			}
		});
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
			textfield_kodealasan_lama.val("");
			textfield_kodealasan.val("");
			textfield_alasansp.val("");
			textfield_keterangan.val("");
			radiofield_katringan.jqxRadioButton({ checked: true });
			
			textfield_kodealasan.prop('disabled', false);
			
			alasanspForm.jqxValidator('hide');
        }

        function cu_formSet(dataRecord){
            btn_alasansp_task = "UPDATE";
			
			textfield_kodealasan_lama.val(dataRecord.KODEALASAN);
			textfield_kodealasan.val(dataRecord.KODEALASAN);
			textfield_alasansp.val(dataRecord.ALASANSP);
			textfield_keterangan.val(dataRecord.KETERANGAN);
			if(dataRecord.KATEGORI == 'R'){
				radiofield_katringan.jqxRadioButton({ checked: true });
				radiofield_katsedang.jqxRadioButton({ checked: false });
				radiofield_katberat.jqxRadioButton({ checked: false });
			}else if(dataRecord.KATEGORI == 'S'){
				radiofield_katringan.jqxRadioButton({ checked: false });
				radiofield_katsedang.jqxRadioButton({ checked: true });
				radiofield_katberat.jqxRadioButton({ checked: false });
			}else {
				radiofield_katringan.jqxRadioButton({ checked: false });
				radiofield_katsedang.jqxRadioButton({ checked: false });
				radiofield_katberat.jqxRadioButton({ checked: true });				
			}
			
			textfield_kodealasan.prop('disabled', true);
            
            formExpand();
			
			textfield_alasansp.focus();
        }
		
		function cu_formDel(dataRecord){
			var row = {
					task: 'DELETE',
					kodealasan: dataRecord.KODEALASAN
			};
			
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_alasansp&m=get_action',
				data: row,
				success: function(response){
					if(response==1){
						$('#jqxgrid').jqxGrid('updatebounddata');
						gridExpand();
					}
					else{
						createNotice(response);
					}
				}
			});
			
		}
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	navbar.jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	navbar.jqxNavigationBar('expandAt', 1);
        }
		
		function createNotice(msg){
            message_notice.html(msg);
            saving_notice.jqxWindow('show');
			saving_notice.jqxWindow('bringToFront');
        }
        /* END FUNCTION */
		
		navbar.bind('expandedItem', function (event) {
			if((event.item == 1) && (formExpandVar == 1) && (btn_alasansp_task == "UPDATE")){
				alasansp_task = "UPDATE";
			}else{
				alasansp_task = "CREATE";
			}
		});
		navbar.jqxNavigationBar('expandAt', 0);
		navbar.jqxNavigationBar('collapseAt', 1);

	});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 350px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="alasanspForm" action="#">
		<table class="register-table">
			<tr style="display: none;">
				<td align="right">KODEALASAN LAMA:</td>
				<td align="left"><input id="alasansp_kodealasan_lama" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KODEALASAN:</td>
				<td align="left"><input id="alasansp_kodealasan" class="text-input" maxlength="5" />(maks 5 karakter)</td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">ALASANSP:</td>
				<td align="left"><textarea id="alasansp_alasansp" maxlength="20" class="text-input" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KATEGORI:</td>
				<td align="left" valign="top">
					<div style="float: left;" id='jqxRadioKatRingan'>Ringan</div>
					<div style="float: left;" id='jqxRadioKatSedang'>Sedang</div>
					<div style="float: left;" id='jqxRadioKatBerat'>Berat</div>
				</td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KETERANGAN:</td>
				<td align="left"><textarea id="alasansp_keterangan" maxlength="20" class="text-input" ></textarea></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px; padding-right: 10px;" align="left"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
	<input id="exportExcelBtn" type="button" value="Export Excel" />
	<input id="exportPdfBtn" type="button" value="Export PDF" />
	<input id="exportPrintBtn" type="button" value="Print" />
</div>

<div id="saveAlasanSPNotice">
    <div>Info</div>
    <div>
        <div id="eventLog"></div>
        <div style="float: right; margin-top: 15px;">
            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
        </div>
    </div>
</div>
